<template>
  <div class="page has-navbar" v-nav="{ title: '下单指南', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
    <div class="page-content text-center">
      <list>
        <div class="list-item" v-for="(guide , index) in guides" :key="index">
          <router-link :to="guide.path"><img :src="guide.src" alt=""></router-link>
        </div>
      </list>
    </div>
    <MenuBottom></MenuBottom>
  </div>
</template>

<script>
  import MenuBottom from '../components/MenuBotton'
  import jpg1 from '../image/guide/1.png'
  import jpg2 from '../image/guide/2.png'
  import jpg3 from '../image/guide/3.png'
  import jpg4 from '../image/guide/4.png'
    export default {
      name: "Guide",
      components : {
        MenuBottom
      },
      data(){
        return{
          guides : [
            {
              path : '/kindLang',
              src : jpg1,
            },
            {
              path : '/numberLang',
              src : jpg2,
            },
            {
              path : '/heartLang',
              src : jpg3,
            },
            {
              path : '/numberLang',
              src : jpg4,
            },
          ]
        }
      },
      methods : {
        back(){
          this.$router.go(-1)
        },
        menu(){

        }
      }
    }
</script>

<style scoped lang="less">
.list-item{
  margin: 15px;
  img{
    width: 100%;
  }
}
</style>
